<template>
    <footer class="footer">
        <div class="footer-content w1200">
            <div class="footer-main">
                <!-- 品牌栏目 -->
                <div class="footer-column brand-column">
                    <div class="brand-logo">
                        <div class="logo-icon"></div>
                        <span class="logo-text">RayLink</span>
                    </div>
                    <p class="brand-slogan">远程无界・即在彼此间</p>
                </div>

                <!-- 产品服务 -->
                <div class="footer-column">
                    <h3 class="column-title">产品服务</h3>
                    <ul class="column-links">
                        <li>个人版产品</li>
                        <li>企业版产品</li>
                        <li>私有化部署</li>
                        <li>下载中心</li>
                        <li>定价与购买</li>
                    </ul>
                </div>

                <!-- 场景应用 -->
                <div class="footer-column">
                    <h3 class="column-title">场景应用</h3>
                    <ul class="column-links">
                        <li>远程控制电脑</li>
                        <li>远程控制手机</li>
                        <li>远程办公</li>
                        <li>远程游戏</li>
                    </ul>
                </div>

                <!-- 探索RayLink -->
                <div class="footer-column">
                    <h3 class="column-title">探索RayLink</h3>
                    <ul class="column-links">
                        <li>关于我们</li>
                        <li>帮助与支持</li>
                        <li>最新资讯</li>
                    </ul>
                </div>

                <!-- 关注我们 -->
                <div class="footer-column">
                    <h3 class="column-title">关注我们</h3>
                    <ul class="social-links">
                        <li>
                            <div class="social-link">
                                <div class="social-icon wechat-icon"></div>
                                <span>微信公众号</span>
                            </div>
                        </li>
                        <li>
                            <div class="social-link">
                                <div class="social-icon bilibili-icon"></div>
                                <span>官方bilibili频道</span>
                            </div>
                        </li>
                        <li>
                            <div class="social-link">
                                <div class="social-icon douyin-icon"></div>
                                <span>官方抖音</span>
                            </div>
                        </li>
                        <li>
                            <div class="social-link">
                                <div class="social-icon xiaohongshu-icon"></div>
                                <span>官方小红书</span>
                            </div>
                        </li>
                        <li>
                            <div class="social-link">
                                <div class="social-icon weibo-icon"></div>
                                <span>官方微博</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="footer-bottom">
                <div class="copyright-info">
                    <img src="https://image.lutongjiakao.com/system/44375058fddc44c2a0b5fff67690cf8e.png" alt=""
                        class="license-icon">
                    <span>中华人民共和国增值电信业务经营许可证编号:合字B1-20200125</span>
                    <span>©2024大鱼互联科技(深圳)有限公司
                        <span class="bah">粤ICP备2023088052号</span>
                    </span>
                </div>
                <div class="legal-links">
                    <div>软件许可协议</div>
                    <div>隐私政策</div>
                    <div>会员服务协议</div>
                </div>
            </div>
        </div>
    </footer>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped>
@use 'sass:math';

@function rem($px) {
    @return math.div($px, 16) * 1rem;
}

// 页脚样式
.footer {
    background: #f8f9fa;
    padding: rem(60) 0 rem(30);
    border-top: 1px solid #e9ecef;
}

.footer-content {
    max-width: rem(1200);
    margin: 0 auto;
    padding: 0 rem(20);
}

.footer-main {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
    gap: rem(40);
    margin-bottom: rem(40);
}

.footer-column {
    .column-title {
        font-size: rem(12);
        font-weight: 600;
        color: rgb(70, 70, 70);
        margin: 0 0 rem(20);
        line-height: 1.4;
    }
}

.brand-column {
    .brand-logo {
        display: flex;
        align-items: center;
        margin-bottom: rem(12);

        .logo-icon {
            width: rem(32);
            height: rem(32);
            background: linear-gradient(135deg, #4CAF50, #2E7D32);
            border-radius: rem(6);
            position: relative;
            margin-right: rem(8);

            &::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: rem(20);
                height: rem(20);
                background: white;
                clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 60% 100%, 0% 100%);
            }
        }

        .logo-text {
            font-size: rem(24);
            font-weight: 700;
            color: #333;
        }
    }

    .brand-slogan {
        font-size: rem(10);
        color: #666;
        margin: 0;
        line-height: 1.5;
    }
}

.column-links {
    list-style: none;
    padding: 0;
    margin: 0;

    li {
        cursor: pointer;
        margin-bottom: rem(12);
        color: #666;
        text-decoration: none;
        font-size: rem(10);
        line-height: 1.5;
        transition: color 0.2s ease;

        &:hover {
            color: #4CAF50;
        }
    }
}

.social-links {
    list-style: none;
    padding: 0;
    margin: 0;

    li {
        margin-bottom: rem(12);

        .social-link {
            display: flex;
            align-items: center;
            color: #666;
            text-decoration: none;
            font-size: rem(10);
            cursor: pointer;
            line-height: 1.5;
            transition: color 0.2s ease;

            &:hover {
                color: #4CAF50;
            }

            .social-icon {
                width: rem(24);
                height: rem(24);
                border-radius: 50%;
                background: #ddd;
                margin-right: rem(8);
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;

                &::before {
                    content: '';
                    position: absolute;
                    width: rem(12);
                    height: rem(12);
                    background: white;
                }

                &.wechat-icon::before {
                    background: white;
                    border-radius: rem(2);
                    box-shadow:
                        -rem(3) -rem(2) 0 0 white,
                        rem(3) -rem(2) 0 0 white,
                        -rem(3) rem(2) 0 0 white,
                        rem(3) rem(2) 0 0 white;
                }

                &.bilibili-icon::before {
                    background: #00A1D6;
                    border-radius: 50%;
                }

                &.douyin-icon::before {
                    background: #000;
                    border-radius: rem(2);
                }

                &.xiaohongshu-icon::before {
                    background: #FF2442;
                    border-radius: rem(2);
                }

                &.weibo-icon::before {
                    background: #E6162D;
                    border-radius: 50%;
                }
            }
        }
    }
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: rem(30);
    border-top: 1px solid #e9ecef;
    flex-wrap: wrap;
    gap: rem(20);
}

.copyright-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: rem(8);
    font-size: rem(10);
    color: rgb(180, 180, 180);
    line-height: 1.5;

    .license-icon {
        width: rem(16);
        height: rem(16);
        background: #FF6B35;
        border-radius: 50%;
        position: relative;

        &::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: rem(8);
            height: rem(8);
            background: white;
            border-radius: 50%;
        }
    }

    span {
        white-space: nowrap;
    }
}

.legal-links {
    display: flex;
    gap: rem(20);
    cursor: pointer;

    div {
        color: rgb(180, 180, 180);
        text-decoration: none;
        font-size: rem(10);
        transition: color 0.2s ease;

        &:hover {
            color: #4CAF50;
        }
    }
}

.bah {
    color: rgb(180, 180, 180);
    text-decoration: none;
    font-size: rem(10);
    transition: color 0.2s ease;
    cursor: pointer;

    &:hover {
        color: #4CAF50;
    }
}
</style>